// 创建裁剪区
let $image = $('#image');
// 设置配置项
var option = {
    // 宽高比
    aspectRatio: 1, //正方形
    // 预览区域
    preview: '.img-preview'

};
// 调用cropper方法创建裁剪区
$image.cropper(option);

// // 点击上传，实现选择图片
// $('button:contains("选择头像")').on('click', function () {
//     $('#file').trigger('click');
// })

// // 更换剪裁区图片
// $('#file').on('change', function () {
//     // console.log(12)
//     if (this.files.length > 0) {
//         // 3.1 找到文件对象
//         // console.dir(this);
//         var fileObj = this.files[0];
//         // 3.2 为文件对象创建临时的url
//         var url = URL.createObjectURL(fileObj);
//         // console.log(url);
//         // 3.3 更换剪裁区的图片(销毁剪裁框 --> 更换图片 --> 重新生成剪裁框)
//         $image.cropper('destroy').attr('src', url).cropper(option);
//     }
// });

// // 点击确认，更改头像button
// $('button:contains("确认修改")').on('click', function () {
//     // 裁剪图片
//     let canvas = $image.cropper('getCroppedCanvas', {
//         width: 30,
//         height: 30
//     });
//     // canvas转换字符串
//     let base64 = canvas.toDataURL();
//     // ajax提交
//     $.ajax({
//         type: 'POST',
//         url: '/my/user/avatar',
//         data: {
//             avatar: base64
//         },
//         success: function (res) {
//             layer.msg(res.message);
//             if (res.status === 0) {
//                 // 更新index.html的头像
//                 window.parent.renderUser();
//             }
//         }
//     })
// })